<template>
  <div class="wrap">
    <p class="ts">温馨提示：当打印机无法连接时，请重启打印机后重试</p>
    <div class="bix">
      <p class="title">我的设备</p>
      <div class="item">
        <p>Apple pencil</p>
        <div class="fn">
          <span style="color:#719BEF">连接</span>
          <i></i>
          <span style="color:#FF6060">删除</span>
        </div>
      </div>
    </div>
    <div  class="bix">
      <p class="title">附近的蓝牙打印机设备</p>
      <div class="item">
        <p>Apple pencil</p>
        <!-- <div class="fn">
          <span style="color:#719BEF">连接</span>
          <i></i>
          <span style="color:#FF6060">删除</span>
        </div> -->
      </div>
    </div>
    <div class="bottom">
        <p>开始搜索</p>
        <p>添加云打印机</p>
    </div>
  </div>
</template>
<style scoped lang="scss">
.bottom{
    position: absolute;
    bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    p{
        background: #719BEF;
        padding: 6px 20px;
        color: #fff;
        font-size: .48rem;
        border-radius: 30px;
    }

}
.wrap {
  padding: 0 15px;
  min-height: 100vh;
  background: #fafafa;
  position: relative;
  overflow: hidden;
}
.ts {
  font-size: 0.32rem;
  color: #719BEF;
  text-align: left;
  line-height: 60px;
}
.title {
  color: #555;
  font-size: 0.32rem;
  text-align: left;
  margin-bottom: 15px;
}
.bix{
    margin-bottom: 30px;
}
.item {
  background: #fff;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-radius: 0.266667rem;
  p {
    color: #555;
    font-size: 0.48rem;
    text-align: left;
  }
  .fn {
    display: flex;
    span {
      font-size: 0.32rem;
    }
    i {
      width: 1px;
      background: #9e9b9b;
      display: block;
      margin: 0 20px;
    }
  }
}
</style>